<template>
  <div class="myOrder">
    <el-card shadow="never" class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单/10" name="first"></el-tab-pane>
        <el-tab-pane label="待付款/2" name="second"></el-tab-pane>
        <el-tab-pane label="代发货/1" name="third"></el-tab-pane>
        <el-tab-pane label="待评价/1" name="fourth"></el-tab-pane>
      </el-tabs>
      <div class="OrderHead">
        <ul class="Head-ul">
          <li>宝贝</li>
          <li>单价</li>
          <li>单价数量</li>
          <li>商品操作</li>
          <li>实付款</li>
          <li>交易操作</li>
        </ul>
        <div class="Body-div" v-for="item in 10" :key="item.id">
          <div>
            下单时间：
            <span>2019-07-26</span> 订单号:
            <span>546126119511223695</span>
          </div>
          <div>
            <img
              class="f-l"
              src="https://img2.tuhu.org/Images/Products/FheDL1cMX-ohcwtUgoslYbHsLNuz_w800_h800.jpeg@110w_110h_100Q.jpg"
              alt
            />
            <p class="f-l">2019秋装新款女士西服女韩版修身小西装外套时尚双排扣职业套装潮</p>
          </div>
          <div>80</div>
          <div>1</div>
          <div>申请售后</div>
          <div>79</div>
          <div>
            <button>确认收货</button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },

  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../../common/style.scss";
$width1: 320px; //宝贝宽
$width: 130px; //其他宽
$HerBack: rgb(240, 240, 240); //头部背景颜色
.OrderHead {
  .Body-div {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px rgb(238, 238, 238) solid;
    height: 120px;
    div {
      float: left;
      text-align: center;
      width: $width;
      font-size: 14px;
      height: 90px;
      line-height: 90px;
    }
    div:nth-child(1) {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: left;
      background-color: $HerBack;
      text-indent: 1em;
    }
    div:nth-child(2) {
      width: $width1;
      img {
        width: 80px;
        margin: 5px;
      }
      p {
        margin-top: 5px;
        width: 220px;
        height: 100px;
        line-height: 20px;
        text-align: left;
      }
    }
  }
  .Head-ul {
    width: 100%;
    height: 40px;
    background-color: $HerBack;
    li {
      float: left;
      line-height: 40px;
      text-align: center;
      width: $width;
      font-size: 14px;
    }
    li:nth-child(1) {
      width: $width1;
    }
  }
}
</style>
